<template>
  <div>
    <div>
      <Breadcrumb />
    </div>
    <div class="center">
      <div class="left"><h1>菜品管理</h1></div>
      <div class="right">
        <input
          type="text "
          @change="search"
          v-model="inputTxt"
          placeholder="输入关键字搜索"
        />
      </div>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="名字" width="180">
        <template slot-scope="scope">
          <!-- <span style="margin-left: 10px">{{ scope.row.name }}</span> -->
          <!-- <el-button type="text" @click="open">{{ scope.row.name }}</el-button> -->
          <el-button type="text" @click="clickDeal(scope.row)">{{
            scope.row.name
          }}</el-button>

          <el-dialog title="菜品详情" :visible.sync="dialogTableVisible">
            <el-table :data="menu">
              <el-table-column
                property="collections"
                label="收藏"
                width="150"
              ></el-table-column>
              <el-table-column
                property="pageview"
                label="浏览"
                width="200"
              ></el-table-column>
            </el-table>
          </el-dialog>
        </template>
      </el-table-column>
      <el-table-column label="图片" width="250">
        <template slot-scope="scope">
          <el-image
            style="width: 150px; height: 80px"
            :src="scope.row.coverpic"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="是否免费" width="170">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            scope.row.isFree == "N" ? "免费" : "不免费"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是不是热菜" width="170">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            scope.row.isHot == "N" ? "是" : "不是"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="菜品时间" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.needtime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            scope.row.state == "1" ? "上架" : "下架"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-dialog title="修改菜品" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="菜品名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="菜品的时间" :label-width="formLabelWidth">
                <el-input v-model="form.needtime" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="是否免费" :label-width="formLabelWidth">
                <el-select v-model="form.isFree" placeholder="请选择是或否">
                  <el-option label="否" value="Y"></el-option>
                  <el-option label="是" value="N"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否热菜" :label-width="formLabelWidth">
                <el-select v-model="form.isHot" placeholder="请选择是或否">
                  <el-option label="否" value="Y"></el-option>
                  <el-option label="是" value="N"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="changeMenu">确 定</el-button>
              <el-button type="primary" @click="dialogFormVisible = false"
                >取 消</el-button
              >
            </div>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Breadcrumb from "../../commponents/common/Breadcrumb.vue";
export default {
  components: { Breadcrumb },
  data() {
    return {
      tableData: [],
      dialogTableVisible: false,
      menu: [],
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      dialogFormVisible: false,
      formLabelWidth: "400PX",
      inputTxt: "",
      pageData: {
        pageSize: 5,
        currentPage: 1,
        total: 100,
      },
    };
  },
  methods: {
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.form = row;
    },
    clickDeal(e) {
      this.menu.push(e);
      this.dialogTableVisible = true;
    },
    //确认修改
    async changeMenu() {
      this.dialogFormVisible = false;
      await this.$api.dishesList.changeCarousel({
        _id: this.form._id,
        isFree: this.form.isFree,
        isHot: this.form.isHot,
        needtime: this.form.needtime,
      });
      const { data } = await this.$api.dishesList.getDishesList({pageSize: this.pageData.pageSize,
          currentPage: this.pageData.currentPage});
      this.tableData = data.menus;
    },
    //进行搜索
    async search(e) {
      const { data } = await this.$api.dishesList.searchMenu({
        val: this.inputTxt,
      });
      this.tableData = data.menus;
    },
    //分页
    handleSizeChange(val) {
      this.pageData.pageSize = val;
    },
    handleCurrentChange(val) {
      this.pageData.currentPage = val;
    },
  },
  async created() {
    const { data } = await this.$api.dishesList.getDishesList({
      pageSize: this.pageData.pageSize,
      currentPage: this.pageData.currentPage,
    });
    this.tableData = data.menus;
    this.pageData.total = data.total;
  },
  computed: {
    headers() {
      return {
        Authorization: localStorage.token,
      };
    },
  },
  watch: {
    pageData: {
      async handler() {
        const { data } = await this.$api.dishesList.getDishesList({
          pageSize: this.pageData.pageSize,
          currentPage: this.pageData.currentPage,
        });
        this.tableData = data.menus;
        this.pageData.total = data.total;
      },
      deep: true,
    },
  },
};
</script>

<style>
.center {
  display: flex;
  justify-content: space-between;
}
.center .right {
  text-align: center;
  margin-top: 20px;
}
</style>